<template>
  <HeaderTitle title="基本单资讯内容"></HeaderTitle>

  <!-- For Dispatcher(all?) only: INPUT WORK ORDER NO -->
  <div class="row searchWOBox justify-center">
    <div class="col-6">
      <q-input
        v-focus
        dense
        standout
        v-model="orderNo"
        placeholder="搜寻工单..."
        bg-color="white"
        :input-style="{ color: 'black' }"
        class="inputBox"
        @keyup.enter="searchWO()"
      >
        <q-icon
          name="fa-solid fa-magnifying-glass"
          class="searchSVG"
          @click="searchWO()"
        />
      </q-input>
    </div>
  </div>

  <div v-if="loadOrder" class="wodetails">
    <q-tabs
      v-model="tab"
      dense
      class="color-lightpurple"
      active-color="white"
      active-bg-color="indigo-10"
      indicator-color="white"
      right-icon="none"
    >
      <!-- 工单概览 -->
      <q-tab name="wod" class="qtab">
        <q-item-label class="q-tab--title">
          <q-icon
            name="fa-solid fa-file-lines"
            class="q-tab-icon"
          />工单概览</q-item-label
        >
      </q-tab>

      <!-- 工件计时 -->
      <q-tab name="wot" class="qtab" :disable="role!='WORKER'&&role!='QC'&&role!='DISPATCHER'">
        <!-- <q-tab name="wot" class="qtab" :disable="!allowAction && role !== 'DISPATCHER'"> -->
        <div v-if="role === 'WORKER'">
          <q-item-label class="q-tab--title">
            <q-icon
              name="fa-solid fa-pen-ruler"
              class="q-tab-icon"
            />工件计时</q-item-label
          >
        </div>
        <div v-else-if="role === 'QC'">
          <q-item-label class="q-tab--title">
            <q-icon
              name="fa-solid fa-clipboard-check"
              class="q-tab-icon"
            />審核工单</q-item-label
          >
        </div>
        <div v-else-if="role === 'DISPATCHER'">
          <q-item-label class="q-tab--title">
            <q-icon
              name="fa-solid fa-diagram-next"
              class="q-tab-icon"
            />工单流程</q-item-label
          >
        </div>
      </q-tab>
    </q-tabs>

    <q-tab-panels v-model="tab" animated class="nobgcolor">
      <!-- 工单概览 -->
      <q-tab-panel name="wod" class="qtabContent">
        <WODetailsOverviewLayout
          @switchTabWot="switchTabWot"
        ></WODetailsOverviewLayout>
      </q-tab-panel>

      <!-- 工件计时 (WORKER) / 審核工单 (QC) / 工单流程 (DISPATCHER) -->
      <q-tab-panel name="wot" class="qtabContent">
        <!-- <q-tab-panel name="wot" class="qtabContent" :disable="!allowAction && role !== 'DISPATCHER'"> -->
        <div v-if="role === 'WORKER'">
          <WorkTimerPage></WorkTimerPage>
        </div>
        <div v-else-if="role === 'QC'">
          <WOReviewPage></WOReviewPage>
        </div>
        <div v-else-if="role === 'DISPATCHER'">
          <WOFlowPage></WOFlowPage>
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useUserStore } from "src/stores/modules/userStore";
import { useWoDetailsStore } from "src/stores/modules/wodetailsStore";
import { useWOReviewStore } from "src/stores/modules/woReviewStore";
import HeaderTitle from "src/components/HeaderTitle.vue";
import WODetailsOverviewLayout from "./WODetailsOverviewLayout.vue";
import WorkTimerPage from "../../pages/WOdetails/WorkTimerPage.vue";
import WOReviewPage from "src/pages/WOdetails/WOReviewPage.vue";
import WOFlowPage from "src/pages/WOdetails/WOFlowPage.vue";

// Check User Role

const userStore = useUserStore();
let role = null;
let roleName = null;
let accID = null;
// Search work order
const wodetailsStore = useWoDetailsStore();
let orderNo = ref(null);
// Set work order review
const woReviewStore = useWOReviewStore();

// Allow action page to be accessed
// const allowAction = ref(false)

const $q = useQuasar();

// tab
let tab = ref("wod");
// show order details after searching wo && success
const loadOrder = ref(false);

// Get Role
if (userStore.currentDept != null) {
  role = userStore.currentDept.roleGroup;
  roleName = userStore.currentDept.role;
  accID = userStore.currentDept.accID;
  // console.log('role: ', role)
  console.log("accID: ", accID);
}

// FUNCTION: Search Work Order
const searchWO = async () => {
  loadOrder.value = false;
  const orderNo_value = orderNo.value;
  orderNo.value = "";
  if (
    orderNo_value !== undefined &&
    orderNo_value !== null &&
    orderNo_value !== ""
  ) {
    const res = await wodetailsStore.getWODetails(
      orderNo_value,
      accID,
      roleName
    );
    console.log("wodetails res: ", res);
    if (res) {
      console.log("called OrderView api");
      wodetailsStore.setWorkOrderDetails(orderNo_value);
      // allowAction.value = wodetailsStore.allowAction
      loadOrder.value = true;
      // orderNo.value = "";
    } else {
      $q.notify({
        type: "negative",
        textColor: "white",
        message: "错误发生 !",
        timeout: 2000,
        position: "center",
      });
    }
  }
  // orderNo.value = ''
};

// Testing: get orderNo from routing path
// eslint-disable-next-line vue/no-setup-props-destructure
const props = defineProps({
  orderNo: { type: String, required: false },
  tab: { type: String, required: false },
});
console.log("props", props);
console.log("props.orderNo: ", props.orderNo);
console.log("props.tab: ", props.tab);

// Set orderNo if it is clicked from massScan
if (
  props.orderNo !== undefined &&
  props.orderNo !== null &&
  props.orderNo !== ""
) {
  // orderNo = ref(props.orderNo)
  orderNo.value = props.orderNo;
  wodetailsStore.setWorkOrderDetails(orderNo.value);
  searchWO();
  console.log("orderNo.value: ", orderNo.value);
} else {
  orderNo.value = null;
}

const vFocus = {
  mounted: (el) => {
    if (!orderNo.value) {
      el.focus();
    }
  },
};

// Set tab value if it is clicked from massScan else default as WO details
// wod = wo details, wot = wo timer
if (props.tab !== undefined && props.tab !== null && props.tab !== "") {
  tab = ref(props.tab);
  console.log("tab: ", tab.value);
} else {
  tab = ref("wod");
  console.log("tab: ", tab.value);
}

// Switch tab function
const switchTabWot = () => {
  tab.value = "wot";
};

console.log("tab.value: ", tab.value);
</script>

<style lang="scss" scoped>
.searchWOBox {
  background-color: #90a9f7;
  padding: 10px 5px;
  @media (max-width: 480px) {
    padding: 5px 5px;
  }
  .searchSVG {
    margin-top: auto;
    margin-bottom: auto;
    color: black;
    float: right;
  }
}

.wodetails {
  margin-bottom: 30px;
}

q-tabs {
  width: 100%;
}

.q-icon
  .notranslate
  .material-icons
  .q-tabs__arrow
  .q-tabs__arrow--right
  .absolute
  .q-tab__icon {
  display: none !important;
}

.qtab {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  @media (max-width: 480px) {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.q-tab--title {
  font-size: 1.5rem;
  @media (max-width: 480px) {
    font-size: 0.8em;
  }
}

.q-tab-icon {
  color: white;
  margin-right: 10px;
  margin-bottom: 5px;
}

.nobgcolor {
  background-color: rgba(255, 255, 255, 0);
}

.q-tab-panel {
  padding: 0px;
}
</style>
